<template>
  <h1>员工列表练习</h1>
  <input type="text" v-model="name" placeholder="请输入员工姓名">
  <input type="text" v-model="salary" placeholder="请输入员工薪资">
  <input type="text" v-model="job" placeholder="请输入员工岗位">
  <button @click="add">点我添加</button>

  <br>
  <table border="1" align="center">
    <tr>
      <td>编号</td>
      <td>员工姓名</td>
      <td>员工薪资</td>
      <td>员工岗位</td>
    </tr>
    <tr v-for="(item,index) in p ">
      <td>{{index+1}}</td>
      <td>{{item.name}}</td>
      <td>{{item.salary}}</td>
      <td>{{item.job}}</td>
    </tr>
  </table>
</template>

<script setup>

import {ref} from "vue";

const name = ref('');
const salary = ref('');
const job = ref('');
const emp = ref([]);
const p = ref([]);
const add = () => {
  if (p.value.name.trim())
  p.value.push({
    name: name.value,
    salary: salary.value,
    job: job.value
  });
  emp.value = {name: '',
  salary:'',
  job: ''};
  console.log(name.value, salary.value, job.value);

}

</script>

<style scoped>

</style>